<template>
  <div class="container">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
    <button @click="addItem">生成</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'ModifyList',
  setup() {
    const items = ref([])

    const addItem = () => {
      const randomNum = Math.floor(Math.random() * 10)  // 生成0到9的随机数
      items.value.push(randomNum)
    }

    const removeItem = (index) => {
      items.value.splice(index, 1)  // 移除指定索引的元素
    }

    return {
      items,
      addItem,
      removeItem
    }
  }
}
</script>

<style>
.container {
  width: 450px;
  border: 1px solid #000;
  padding: 10px;
}
</style>
